<template>
	<div class="personInCharge">
		<!--    伪选择框-->
		<div class="personInCharge-box"
			:class="[selectType == true?'personInCharge-box-border-choose':'personInCharge-box-border']">
			<span class="personInCharge-box-title"
				v-if="personInChargeForm == null && collaboratorsForm.length == 0">指派负责人/协作者</span>
			<div class="personInCharge-content-item" v-if="personInChargeForm">
				<el-image :src="personInChargeForm.avatar" class="personInCharge-content-item-logo"></el-image>
				<span class="personInCharge-content-item-title">{{ personInChargeForm.userName }}</span>
			</div>
			<i class="personInCharge-box-icon el-icon-arrow-down"
				:class="[selectType == false?'transformIconChoose':'transformIcon']"></i>
		</div>
		<el-select ref="personInChargeSelect" style="width: 100%" v-model="selectTitle" @visible-change="visibleChange"
			size="medium" placeholder="请选择">
			<template slot="empty">
				<div class="select">
					<div class="select-search">
						<el-input size="small" placeholder="请输入内容" prefix-icon="el-icon-search" v-model="queryInput"
							@input="inputClick">
						</el-input>
					</div>
					<div :class="[itemIndex == index?'select-item-choose':'select-item']"
						v-for="(item,index) in options" @click="groupItemClick(item,index)">
						<div class="select-item-left">
							<el-image class="select-item-logo" v-if="item.avatar" :src="item.avatar"></el-image>
							<el-image class="select-item-logo" v-else src="https://img2.baidu.com/it/u=2277413437,2773342262&fm=253&fmt=auto&app=120&f=JPEG?w=516&h=500"></el-image>
							<span class="select-item-title">{{ item.userName }}</span>
						</div>
						<div class="select-item-right">
							<span class="select-item-right-title">{{item.mobile}}</span>
						</div>
					</div>
					<el-empty description="暂无数据" :image-size="40" v-if="options.length == 0"></el-empty>
				</div>
			</template>
		</el-select>
	</div>
</template>
<script>
	import { list } from '@/api/termuser.js'
	export default {
		data() {
			return {
				options: [],
				selectTitle: '',
				queryInput: '',
				inputLoading: false,
				itemIndex: -1,
				selectType: false,
				personInChargeForm: null,
				collaboratorsForm: []
			}
		},
    props:['projId'],
    watch:{
      projId:{
        handler(newName, oldName) {
          this.loadList('',newName)
        },
        immediate: true,
        deep:true
      }
    },
		created() {

		},
		methods: {
			loadList(data,org){
				var _this = this
				var userName = ''
        var orgId = ''
				if(data){
					userName = data
				}
				if(org){
          orgId = org
        }
				list({current:1,size:10,userName:userName,projId: orgId}).then(res=>{
					_this.options = res.data.records
					console.log('成员')
					console.log(res)
				})
			},
			groupClick(item) {
				item.type = !item.type
			},
			groupItemClick(item, index) {
				var _this = this
				if (_this.itemIndex == index) {
					_this.itemIndex = -1
					_this.personInChargeForm = null
				} else {
					_this.itemIndex = index
					_this.personInChargeForm = item
					_this.$refs.personInChargeSelect.blur()
				}
				_this.$emit('dirctorChoose',_this.personInChargeForm)
			},
			filterClick() {
				var _this = this
				var data = []
				_this.options.forEach(function(item) {
					if (item.type == true) {
						item.options.forEach(function(items) {
							if (items.type == true) {
								data.push(items)
							}
						})
					}
				})
				_this.collaboratorsForm = data
			},

			visibleChange(item) {
				var _this = this
				_this.selectType = item
			},
			inputClick(data) {
				var _this = this
				if (this.timer) {
					clearTimeout(this.timer);
				}
				this.timer = setTimeout(() => {
					console.log(data)
					console.log('我进来了')
					_this.loadList(data)
				}, 500);
				// if (this.inputLoading == true) {
				// 	return
				// }
				// this.inputLoading = true
				// setTimeout(() => {
				// 	_this.inputLoading = false
				// }, 1000)
			},
		}
	}
</script>

<style scoped>
	.select {
		max-height: 380px;
		overflow: auto;
	}

	.select-search {
		padding-top: 10px;
		padding-left: 10px;
		padding-right: 10px;
		padding-bottom: 10px;
		box-sizing: border-box;
	}

	.select-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 10px 10px;
		cursor: pointer;
		color: #333333;
		justify-content: space-between;
	}

	.select-item-choose {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 10px 10px;
		cursor: pointer;
		background-color: rgba(194, 214, 255, 0.22);
		color: #2c7ef8;
		justify-content: space-between;
	}

	.select-item:hover {
		background-color: rgba(88, 96, 105, 0.06);
	}

	.select-item-logo {
		width: 20px;
		height: 20px;
		border-radius: 50%;
	}

	.select-item-title {
		flex: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 14px;
		margin-left: 10px;
		display: block;
		max-width: 220px;
	}

	.select-item-left {
		display: flex;
		flex-direction: row;
		align-items: center;
		max-width: 200px;
		margin-right: 40px;
	}

	.select-item-right {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.select-item-right-title {
		font-size: 12px;
		color: #909aaa;
		font-weight: bold;
	}


	.personInCharge {
		width: 360px;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #e47777;
		border-radius: 4px;
		position: relative;
	}

	.personInCharge-box {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1;
		border-radius: 4px;
		pointer-events: none;
		background-color: white;
		padding-left: 10px;
		padding-right: 30px;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.personInCharge-box-icon {
		color: #C0C4CC;
		font-size: 14px;
		transition: transform .3s;
		cursor: pointer;
		position: absolute;
		right: 10px;
	}

	.transformIcon {
		transform: rotateZ(-180deg);
	}

	.transformIconChoose {
		transform: rotateZ(0deg);
	}

	.personInCharge-box-border {
		border: 1px solid #DCDFE6;
	}

	.personInCharge-box-border-choose {
		border: 1px solid #1890ff;
	}

	.personInCharge-box-title {
		color: #C0C4CC;
		font-size: 14px;
	}


	.personInCharge-content-item {
		padding: 3px 0px;
		display: flex;
		align-items: center;
	}

	.personInCharge-content-item-logo {
		width: 18px;
		height: 18px;
		border-radius: 50%;
		margin-right: 5px;
	}

	.personInCharge-content-item-title {
		max-width: 66px;
		font-size: 12px;
		color: #333333;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.refreshRe {
		-webkit-animation: rotate 1.2s linear infinite;
		/*Safari and Chrome*/
	}

	@keyframes rotate {
		0% {

			transform: rotate(360deg);
			-ms-transform: rotate(360deg);
			/* IE 9 */
			-moz-transform: rotate(360deg);
			/* Firefox */
			-o-transform: rotate(360deg);
		}

		100% {
			transform: rotate(0deg);
			-ms-transform: rotate(0deg);
			/* IE 9 */
			-moz-transform: rotate(0deg);
			/* Firefox */
			-o-transform: rotate(0deg);
		}
	}

	@-webkit-keyframes rotate {
		0% {
			-moz-transform: rotate(360deg);
		}

		100% {
			-moz-transform: rotate(0deg);
		}
	}
</style>
